C'est quoi Bootstrap ?

Bootstrap est un framework HTML/CSS/JS. Ce dernier fournit des outils déjà préparés pour concevoir rapidement des pages web (des boutons, fenêtre modales, tableaux, etc...).

Ce framework est un des projets les plus populaires sur Github. Il a été développé en 2010 par Twitter et est actuellement en version 5.0

Inclure Bootstrap sur son site

Pour inclure Bootstrap, soit on le fait en CDN (à distance), soit en téléchargeant les fichiers en local. Il y a 2 fichiers à inclure :

Exemple d'une inclusion depuis le CDN cdnjs.com :

            

                <!DOCTYPE html>
                <html lang="fr">
                <head>
                    <!-- Le fichier CSS doit être inclut avant les autres fichiers CSS -->
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
                    <!-- ... -->
                </head>
                <body>

                    <!-- ... -->

                    <!-- Le fichier JS doit toujours être inclut avant la fermeture de la balise <body> -->
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
                </body>
                </html>

Attention : ne pas inclure de bibliothèque de reset CSS (comme normalize) en même temps que Bootstrap. C'est inutile car ce dernier remet déjà le CSS à plat.

Le système de grille Bootstrap

Ce qui a beaucoup participé à faire connaître Bootstrap, c'est son système de grille en 12 colonnes qui permet de facilement pouvoir agencer une page web. Quand on crée un bloc, sa taille est définit via un nombre de colonne sur un total de 12 (6 colonnes = 50% du parent par exemple.)

            

                <!-- Le conteneur générique de bootstrap (ne peut avoir que des éléments ayant la classe .row en enfants directs !) -->
                <div class="container">

                    <!-- Crée une ligne d'éléments sur 12 colonnes (ne peut avoir que des éléments ayant une classe col-x en enfants directs !) -->
                    <div class="row">

                        <!-- Ce bloc fera une taille de 50% (col-6) de son parent, avec une marge intérieur de 3 (p-3) -->
                        <div class="col-6 p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eaque eveniet exercitationem incidunt iure libero magnam obcaecati quasi, quibusdam, recusandae reprehenderit sequi sint vel voluptas voluptatibus. Beatae magni odio officia optio perspiciatis! Adipisci aliquam aspernatur aut, commodi cum enim et incidunt officia, quasi quibusdam quo totam, voluptate voluptatum? Itaque, praesentium.</div>

                        <!-- Ce bloc fera une taille de 25% (col-3) de son parent, avec une marge intérieur de 3 (p-3) -->
                        <div class="col-3 p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore et ex rerum! Consectetur dolores ducimus modi, quam quo saepe veniam? Cupiditate inventore maxime vero voluptatibus.</div>
                        <!-- Ce bloc fera une taille de 25% (col-3) de son parent, avec une marge intérieur de 3 (p-3) -->
                        <div class="col-3 p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore et ex rerum! Consectetur dolores ducimus modi, quam quo saepe veniam? Cupiditate inventore maxime vero voluptatibus.</div>

                    </div>

                </div>

Résultat de ce code :

Bootstrap grille

La grille responsive

Encore plus poussé, il est possible de définir la taille des éléments en nombre de colonnes ET en fonction de la taille de l'écran !

            

                <!-- Variante de container (sans marges vides sur les côtés) -->
                <div class="container-fluid">
                    <div class="row">

                        <!-- Voir explication, en dessous -->
                        <div class="col-12 col-sm-8 offset-sm-2 col-xl-6 offset-xl-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur dignissimos dolor dolorum eveniet facilis, ipsam itaque laboriosam, magni minima nam necessitatibus non obcaecati quidem saepe, soluta temporibus tenetur vero? A assumenda delectus dignissimos ea eaque eligendi eos esse facilis fugiat harum inventore ipsam iste libero maiores, minus modi natus nobis non, optio perspiciatis provident quibusdam quis quisquam quo ratione rem repellat similique sit suscipit temporibus totam ut veritatis voluptatem! Ab atque consequatur dolore doloribus eius eos error eveniet fugiat hic, itaque iusto libero natus nisi non placeat quasi qui quia reiciendis rerum saepe sint vero voluptates! Placeat, quisquam velit?</div>
                    </div>
                </div>

Dans l'exemple ci-dessus, le bloc est définit en 3 tailles différentes en fonction de 3 scénarios possibles :

Les offsets sont des décalages en nombre de blocs vers la droite :

Doc sur les 12 colonnes : https://getbootstrap.com/docs/5.0/layout/columns/

Les breakpoints Bootstrap

Il existe 6 breakpoints dans Bootstrap qui s'activeront si la largeur de la fenêtre est comprise entre :

Si vous avez bien regardé, les intervalles de pixels se superposent. La règle est simple, le breakpoints le plus élevé prend le dessus sur les plus petit si l'écran est plus large que lui!

Ainsi si par exemple un bloc possède la classe col-8 et la classe col-xl-6, si l'écran fait 500 pixels, l'élément fera bien 8 colonnes. par contre si l'écran fait 1920 pixels de larges, dans ce cas le bloc fera 6 colonnes de large.

Doc sur les breakpoints : https://getbootstrap.com/docs/5.0/layout/breakpoints/

Utiliser les outils Bootstrap

Bootstrap possède beaucoup d'outils intégrés très pratiques, et ils sont tous référencés avec des exemples et avec le code de ces exemples sur la documentation officielle ici :https://getbootstrap.com/docs/5.0/getting-started/introduction/

Liste non exhaustive d'outils pratiques :